import { Modal, Form, Row, Col, Button } from 'antd';
import styles from './style.less';
import { axconst } from '@/shared/axconst';
import { Fragment } from 'react';
import { AxButton } from '@/components/AxBase';
import IconFont from '@/assets/iconfont';

const { searchForm } = axconst;
/**
 * 自定义查询表单
 * @param form 表单
 * @param items 表单项
 * @param handleSearch 查询处理函数
 * @param handleResetSearch 重置查询处理函数
 */
// export class AxAdvancedSearch extends React.Component {
//   constructor(props) {
//     super(props);
//   }

//   handleSubmit = e => {
//     const { form, handleSearch, handleVisible } = this.props;
//     form.validateFields((err, fieldsValue) => {
//       if (err) return;
//       if (handleSearch) {
//         for (const i in fieldsValue) {
//           if (fieldsValue[i]) {
//             fieldsValue[i] = fieldsValue[i].trim();
//           }
//         }
//         handleSearch(e, fieldsValue).then(() => {
//           if (handleVisible) handleVisible();
//         });
//       }
//     });
//   };

//   handleReset = () => {
//     const { form, handleResetSearch } = this.props;
//     form.resetFields();
//     handleResetSearch();
//   };

//   render() {
//     const { items, visible, handleVisible } = this.props;
//     return (
//       <Modal
//         destroyOnClose={false}
//         title="高级查询"
//         width="50%"
//         footer={null}
//         visible={visible}
//         onCancel={() => handleVisible()}
//       >
//         <div className={styles.tableListForm}>
//           <Form onSubmit={e => this.handleSubmit(e)} layout="inline">
//             <Row gutter={searchForm.gutter}>
//               {items.map((i, index) => (
//                 <Col key={index} {...searchForm.span}>
//                   {i}
//                 </Col>
//               ))}
//             </Row>
//             <Row type="flex" justify="center">
//               <Col>
//                 <span className={styles.submitButtons}>
//                   <Button type="primary" htmlType="submit">
//                     查询
//                   </Button>
//                   <Button
//                     style={{
//                       marginLeft: 8,
//                     }}
//                     onClick={this.handleReset}
//                   >
//                     重置
//                   </Button>
//                 </span>
//               </Col>
//             </Row>
//           </Form>
//         </div>
//       </Modal>
//     );
//   }
// }

/** 两列布局Modal（24删格布局）
 * @param form 表单
 * @param items 表单项
 * @param handleSearch 查询处理函数
 * @param handleResetSearch 重置查询处理函数
 * */
export function AxAdvancedSearch(props) {
  const { items, visible, handleVisible, ...rest } = props;
  const GetCol = () => {
    const rows = [];
    let cols = [];
    let nextRow = false;
    const len = items.length - 1;
    items.forEach((i, idx) => {
      /** 占整行 */
      if (i.props.wholerow === 'three') {
        cols.push(<Col span={24}>{i}</Col>);
        nextRow = true;
      } else {
        cols.push(<Col span={8}>{i}</Col>);
        if (cols.length === 3) {
          nextRow = true;
        }
      }
      if (nextRow === true || len === idx) {
        rows.push(
          <Row key={idx}>
            {cols.map((j, index) => (
              <Fragment key={index}>{j}</Fragment>
            ))}
          </Row>,
        );
        cols = [];
        nextRow = false;
      }
    });
    return rows;
  };
  const handleSubmit = e => {
    const { form, handleSearch, handleVisible } = props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (handleSearch) {
        for (const p in fieldsValue) {
          const v = fieldsValue[p];
          /** 去掉空格 */
          if (v && v.trim) {
            fieldsValue[p] = v.trim();
          }
          /** 处理提交的时间格式 */
          if (p.toLowerCase().indexOf('time') > -1 || p.toLowerCase().indexOf('created') > -1 || p.toLowerCase().indexOf('date') > -1) {
            if (v && v.length === 2 && v[0].format && v[1].format) {
              fieldsValue[p] = v[0].format(v._f) + '~' + v[1].format(v._f);
              fieldsValue[p + 'Start'] = v[0].format(v._f);
              fieldsValue[p + 'End'] = v[1].format(v._f);
            } else if (v && v.format && v._f) {
              fieldsValue[p] = v.format(v._f);
            }
          }
        }
        handleSearch(e, fieldsValue).then(() => {
          if (handleVisible) handleVisible();
        });
      }
    });
  };
  const handleReset = () => {
    const { form, handleResetSearch } = props;
    form.resetFields();
    handleResetSearch('clear');
  };
  return (
    <Modal
      destroyOnClose={false}
      title="高级查询"
      width="60%"
      footer={null}
      visible={visible}
      onCancel={() => handleVisible()}
      {...rest}
    >
      {GetCol()}
      <Row key="operate" type="flex" justify="center">
        <Col>
          <span className={styles.submitButtons}>
            <AxButton type="primary" onClick={e => handleSubmit(e)} icon='search'>
              查询
            </AxButton>
            <AxButton
              style={{
                marginLeft: 8,
              }}
              onClick={handleReset}
            >
              <IconFont type='iconreset' />重置
            </AxButton>
          </span>
        </Col>
      </Row>
    </Modal>
  );
}
